<template>
    <a-form ref="formRef" :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="类型名称" :rules="rules.name" name="name">
            <a-input v-model:value="form.name" placeholder="请输入电站类型名称" />
        </a-form-item>
        <a-form-item label="排序号" name="sort">
            <a-input-number v-model:value.number="form.sort" :min="1" placeholder="请输入排序号">
                <template #addonAfter>
                    <a-tooltip placement="bottomRight">
                        <template #title>排序号越小越靠前</template>
                        <question-circle-outlined />
                    </a-tooltip>
                </template>
            </a-input-number>
        </a-form-item>
    </a-form>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
import { useForm } from '@iframe/tools/mixins/FormMixins'

const { validate, getForm, setForm } = useForm()
const formRef = ref()
const form = reactive({})
const rules = reactive({
    name: { required: true, message: '请输入电站类型名称' },
    sort: { required: true, message: '请输入排序号' }
})

defineExpose({ validate: validate(formRef), getForm: getForm(form), setForm: setForm(form) })
</script>
